<template>
  <div class="">
    <FixedOperation>
      <slot></slot>
      <el-row>
        <el-col :span="2" :offset="22" class="flex justify-end">
          <el-button @click="goBack" type="primary" plain>
            <!-- <el-icon class="mr-5px"><Back /></el-icon> -->
            返回</el-button
          >
        </el-col>
      </el-row>
    </FixedOperation>
    <div class="contractDetail app-container">
      <div class="header">
        <div class="header-name">
          <span class="font-bold text-18px">
            {{ contractInfo.contractName }}
          </span>
          <span
            class="ball"
            :class="{ 'yellow-bg': contractInfo.status === '2' }"
          >
          </span>
          <span class="text-12px">
            {{ contractInfo.status === '2' ? '已完结' : '执行中' }}</span
          >
        </div>
        <div class="info">
          <div>
            客户名称：<span class="ml-5px"> {{ contractInfo.name }} </span>
          </div>
          <div>
            合同金额：<span class="ml-5px">{{ contractInfo.amount }}元</span>
          </div>
          <div>
            合同到期时间：<span class="ml-5px">{{ contractInfo.time }}</span>
          </div>
        </div>
      </div>
      <hr class="mb-20px" />
      <div class="part">
        <TitleName title="基本信息" icon="i-carbon-bookmark-filled"></TitleName>
        <!-- <el-descriptions :column="2" :size="size" border>
          <template v-for="(item, index) in renderInfo" :key="index">
            <el-descriptions-item :label="item.name" :width="120">
              {{ item.value }}
            </el-descriptions-item>
          </template>
        </el-descriptions> -->
        <div>
          <div
            v-for="(item, index) in renderInfo"
            class="row"
            :key="index"
            :class="!index ? 'mt-20px' : 'mt-40px'"
          >
            <div class="col" v-for="v in item" :key="v.key">
              <div v-if="v.key === 'fileNames'" class="flex">
                <div class="label">{{ v.name }}：</div>
                <div style="width: 68%">
                  <div
                    v-for="n in fileList"
                    :key="n.businessId"
                    class="flex mt-3px items-center"
                  >
                    <a :href="n.url" style="color: #409eff">{{
                      n.origFileName
                    }}</a>
                  </div>
                </div>
              </div>
              <div v-else-if="v.key === 'ordOrderContractDto'" class="flex">
                <div class="label">{{ v.name }}：</div>
                <div style="width: 68%">
                  <span
                    v-for="(n, i) in v.value"
                    :key="n.ordId"
                    class="ml-3px items-center"
                    :class="i ? 'comma' : ''"
                  >
                    {{ n.ordName }}
                  </span>
                </div>
              </div>
              <div v-else>
                <span class="label">{{ v.name }}：</span>
                <span>{{ v.value }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="part" v-if="epiboly">
        <TitleName
          title="人力外包情况"
          icon="i-carbon-bookmark-filled"
        ></TitleName>
        <div class="flex justify-center mt-30px">
          <el-table :data="epibolyData" border>
            <el-table-column prop="workName" label="工种" align="center" />
            <el-table-column prop="peopleNum" label="人数" align="center" />
          </el-table>
        </div>
      </div>
      <div class="part">
        <TitleName
          title="合同验收计划"
          icon="i-carbon-bookmark-filled"
        ></TitleName>
        <div class="flex justify-center mt-30px">
          <el-table :data="tableData" border>
            <el-table-column
              prop="periodsNum"
              label="期次"
              width="80"
              align="center"
            />
            <el-table-column
              prop="planAccepDate"
              label="计划验收日期"
              align="center"
            />
            <el-table-column
              prop="planAccepRatio"
              label="计划验收占比"
              align="center"
            />
            <el-table-column
              prop="planReturnSum"
              label="计划回款金额"
              align="center"
            />
            <el-table-column prop="remark" label="备注" align="center" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="DetailContract">
import { reactive, getCurrentInstance, toRefs, ref } from 'vue'
import FixedOperation from '@/components/FixedOperation'
import TitleName from '@/components/TitleName'
import { useRouter } from 'vue-router'
import { contractDetails } from '@/api/salesManage/contractManage'
import {
  business_attribute //业务属性
} from '@/hooks/dict/useProject'
import { epiboly_work_type } from '@/hooks/dict/contract'
import useTagsViewStore from '@/store/modules/tagsView'
const router = useRouter()
const { proxy } = getCurrentInstance()
const epiboly = ref(false)
const data = reactive({
  contractInfo: {
    name: '--',
    amount: '--',
    time: '--',
    status: '--'
  },
  renderInfo: [
    [
      { name: '合同名称', value: '', key: 'contractName' },
      { name: '合同编号', value: '', key: 'contractNum' }
    ],
    [
      { name: '业务属性', value: '', key: 'businessType' },
      { name: '合同金额（元）', value: '', key: 'contractSum' }
    ],
    [
      { name: '履约保证金（万元）', value: '', key: 'pb' },
      { name: '履约保证金是否单独支付', value: '', key: 'pbAlonePay' }
    ],
    [
      { name: '合同甲方', value: '', key: 'partyaName' },
      { name: '甲方签约人', value: '', key: 'partyaSig' }
    ],
    [
      { name: '合同乙方', value: '', key: 'partybName' },
      { name: '乙方签约人', value: '', key: 'partybSig' }
    ],
    [
      { name: '关联订单', value: '', key: 'ordOrderContractDto' },
      { name: '项目名称', value: '', key: 'projectName' }
    ],
    [
      { name: '合同时间起', value: '', key: 'contractTimeBegin' },
      { name: '合同时间止', value: '', key: 'contractTimeEnd' }
    ],
    [
      { name: '销售人员', value: '', key: 'salesmanName' },
      { name: '签订时间', value: '', key: 'sinTime' }
    ],
    [
      { name: '备注', value: '', key: 'remark' },
      { name: '上传合同', value: '', key: 'fileNames' }
    ]
  ],
  tableData: [],
  epibolyData: [],
  fileList: []
})

const { contractInfo, tableData, renderInfo, epibolyData, fileList } =
  toRefs(data)
const rcId = ref()

init()
async function init() {
  try {
    rcId.value = location.search.split('?')[1].split('=')[1]
    const res = await contractDetails(rcId.value)
    epibolyData.value = res.data.ordHroEntity
    epibolyData.value.forEach(v => {
      v.workName = ref(epiboly_work_type).value[Number(v.workType)].label
    })
    tableData.value = res.data.ordProjectCheckEntity
    epiboly.value = res.data.businessType === '1'
    fileList.value = res.data.sysAttachFiles
    const data = res.data
    contractInfo.value = {
      contractName: data.contractName,
      name: data.customerName,
      amount: data.contractSum,
      time: data.contractTimeEnd,
      status: data.status
    }
    renderInfo.value.forEach(item => {
      item.forEach(v => {
        if (data[v.key]) {
          v.value = data[v.key]
        }
        if (v.key === 'businessType') {
          v.value = ref(business_attribute).value.filter(
            m => m.value == v.value
          )[0].label
        }
        if (v.key === 'pbAlonePay') {
          v.value = data[v.key] === '1' ? '是' : '否'
        }
      })
    })
  } catch (error) {
    console.error(error)
  }
}
function goBack() {
  useTagsViewStore().delView(router.currentRoute.value)
  router.push({
    path: '/sales/contract/contractList'
  })
}
</script>

<style lang="scss" scoped>
.contractDetail {
  .comma::before {
    content: '，';
  }
  .header {
    @apply px-60px border;
    width: 100%;
    .ball {
      display: inline-block;
      width: 6px;
      height: 6px;
      background-color: rgb(25, 190, 107);
      border-radius: 50%;
      margin: 0 3px 0 30px;
    }
    .yellow-bg {
      background-color: red;
    }
    .info {
      @apply flex justify-end mt-10px;
      font-size: 13px;
      div {
        margin-right: 20px;
      }
    }
  }
  .part {
    @apply mb-40px;
    .row {
      @apply flex flex-wrap px-60px justify-center;
      font-weight: 600;
      .col {
        width: 40%;
        font-size: 14px;
        font-weight: 500;
        .label {
          @apply mr-20px;
          text-align: right;
          width: 32%;
          display: inline-block;
        }
      }
    }
    :deep .el-table {
      width: 900px;
    }
  }
}
</style>
